<template>
  <el-row class="login-page">
    <el-col :span="12" class="bg"></el-col>
    <el-col :span="6" :offset="3" class="form">
      <!-- 登录表单 -->
      <el-form ref="form" size="large" autocomplete="off" :model="loginForm" :rules="rules">
        <el-form-item>
          <h1>星轻食</h1>
        </el-form-item>
        <el-form-item prop="username">
          <el-input :prefix-icon="User" v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入账号"
            clearable></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input name="password" :prefix-icon="Lock" type="password" v-model="loginForm.password" placeholder="请输入密码"
            clearable @keyup.enter="loginClick"></el-input>
        </el-form-item>
        <el-form-item class="flex">
          <el-radio-group v-model="radio">
            <el-radio :value="0">管理员</el-radio>
            <el-radio :value="1">商家</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button :loading="loading" class="button" type="primary" auto-insert-space @click="loginClick">
            <span v-if="!loading">登录</span>
            <span v-else>登录中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ElForm } from 'element-plus'
import { ref, reactive } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { FormRules } from 'element-plus'
import { postAdminLoginAPI } from '@/api/admin/admin'
import { postEmployeeLoginAPI } from '@/api/business/business'
import { useRouter } from 'vue-router'

const router = useRouter()
// 登录表单
const form = ref<InstanceType<typeof ElForm> | null>(null);
const loginForm = ref({
  username: '',
  password: '',
})
import { pwdValidate, usernameValidator } from '@/utils/validator'
// 校验规则
const rules = reactive<FormRules<typeof loginForm>>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    {
      min: 2,
      max: 10,
      message: '长度为2~10个非空字符且只能为数字或字母',
      trigger: 'submit',
    },
    { validator: usernameValidator, trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      validator: pwdValidate,
      trigger: 'blur',
    },
  ],
})
// 登录方式 0:管理员 1:商家
const radio = ref(0)
// 登录状态
const loading = ref(false)
import { useUserStore } from '@/stores/userStore'
const userStore = useUserStore()

// 登录请求
const loginClick = async () => {
  if (!form.value) return
  try {
    await form.value.validate()
    loading.value = true
    // 管理员登录
    if (radio.value === 0) {
      let { data } = await postAdminLoginAPI(loginForm.value)
      userStore.login(data)
      localStorage.setItem('token', data.token)
      router.push('/')
    } else {
      // 商家登录
      let { data } = await postEmployeeLoginAPI(loginForm.value)
      userStore.login(data)
      localStorage.setItem('token', data.token)
      router.push('/')
    }
  } catch (error) {
    console.log(error)
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
.login-page {
  height: 100vh;
  background-color: #fff;

  .bg {
    background: url('/login/login.jpg') no-repeat center / cover;
    border-radius: 20px;
  }

  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;

    .title {
      margin: 0 auto;
    }

    .button {
      width: 100%;
    }

    .flex {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
